import "./index.scss";
import { useState,  } from "react";
import { View,  Input, Picker, Textarea } from "@tarojs/components";
import {oneClassify, secondClassify} from '@/const/index'
// import { randomUUID } from "crypto";
import { getStorageSync, setStorageSync } from "@tarojs/taro";
function OutCome() {
  const [price, setPrice] = useState("");
  const [mark, setMark] = useState("")

  const [date, setDate] = useState(new Date().toLocaleDateString().replace(/\//g, "-"));

  const [oneClassName, setOneClassName] = useState('食品酒水');
  const [oneClassId, setOneClassId] = useState(2);
  const [secondClassId, setSecondClassId] = useState(1);
  const [secondClassName, setSecondClassName] = useState('早午晚餐');

  const handleChange = (value: any) => {
    setPrice(value.detail.value);
    return value.detail.value;
  };
  const onDateChange = (value: any) => {
    setDate(value.detail.value);
  };
  const onOneChange = (value: any) => {
    setOneClassId(value.detail.value);
    const name = oneClassify.find((item: any) => item.id == value.detail.value)?.name;
    setOneClassName(name ||'');

  };
  const onSecondChange = (value: any) => {
    setSecondClassId(value.detail.value)
    const name = secondClassify[oneClassId].find((item: any) => item.id == value.detail.value)?.name;
    setSecondClassName(name ||'');
  }
  const handleMarkChange = (event: any) => {
    setMark(event.target.value);
  };
  const handleSave = async()=>{
    const params = {
      oneClassId,
      oneClassName,
      secondClassId,
      secondClassName,
      date,
      mark,
      price,
      id:new Date().getTime()
    }
   let data = await getStorageSync('outCome')
   console.log(data,'000')
   if(data && data.length){
     data.push(params)
   }else {
    data = [params]
   }
    setStorageSync('outCome',data)
  }
  return (
    <View className="outcome-content">
      <Input
        type="digit"
        className="input"
        value={price}
        placeholder="0.00"
        focus
        onInput={handleChange}
      />
      <View className="save-btn" onClick={handleSave}>提交</View>
      <View className="classify-btn">
        <View className="t-icon t-icon-jujia icons"></View>
        <View className="title">分类</View>
        <Picker mode="selector" range={oneClassify} rangeKey="name" value={oneClassId} onChange={onOneChange}>
          {oneClassName}
        </Picker>
        <View className="iconfont icon-shezhi-youjiantou icon"></View>
        <Picker mode="selector" range={secondClassify[oneClassId]}  rangeKey="name" onChange={onSecondChange}>
          {secondClassName}
        </Picker>
      </View>
      <View className="time-btn">
        <View className="t-icon t-icon-jujia icons"></View>
        <View className="title">时间</View>
        <Picker mode="date" value={date} onChange={onDateChange}>
          {date}
        </Picker>
      </View>
      <View className="mark-content">
        <View className="t-icon t-icon-jujia icons"></View>
        <View className="title">备注</View>
      </View>
      <Textarea
        value={mark}
        className="textarea"
        onInput={handleMarkChange}
        placeholder="..."
      ></Textarea>
    </View>
  );
}
export default OutCome;
